{extend name="base"/}
{block name="resources"}
<style>
	.ns-body-content {min-height: 630px;}
    .ns-combo-box{width: 1000px;text-align: center;padding-top: 50px;padding-bottom: 50px;margin: 0 auto;}
    .ns-combo-template{display: flex;flex-wrap: wrap;margin: 50px auto 0; }
    .ns-combo-template li{width: 227px;height: 500px;padding: 30px 0 20px;margin: 0 10px 20px;text-align: center;border: 1px solid #f2f2f2;position: relative;margin-bottom: 20px;}
    .ns-combo-template .item-title{margin-top: 3px;font-size: 20px;color: #000;line-height: 1;}
    .ns-combo-template .item-price{color: #999;font-size: 14px;width: 227px;height: 45px;line-height: 45px;cursor: pointer;}
    .ns-combo-template .item-price span{font-size: 30px;}
    .ns-combo-template .item-content{display: flex;align-items: end;flex-direction: column;border-top: 1px solid rgb(242, 242, 242);margin: 0 10px;padding: 26px 18px 0;height: 275px;overflow: hidden;}
    .ns-combo-template .item-content > .title{color: #777;margin-bottom: 10px;line-height: 22px;}
    .ns-combo-template .item-content span{font-size: 12px;color: #999;line-height: 22px;}
    .ns-combo-template .item-content .exist-addon{color: #646566;}
    .ns-combo-template .item-content .unselected{color: #ccc;}
    .ns-combo-template .item-content span i{font-style: normal;margin-right: 5px;}
    .ns-combo-template .item-btn{display: inline-block;width: 95px;border: 1px solid transparent;height: 32px;line-height: 32px;margin-top: 20px;cursor: pointer;}
    .ns-combo-template .item-detail{border-color: transparent;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);width: 160px;height: 40px;line-height: 40px !important;font-size: 16px;}
    .item-desc{font-size: 12px;color: #646566;padding: 0 20px;margin: 15px 0;line-height: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;white-space: normal;word-break: break-all;height: 60px !important;}
    .iconiconangledown, .iconiconangledown-copy{font-size: 30px;color: #999999;cursor: pointer;}

    .ns-purchase-page{display: flex;width: 615px;margin: 35px auto;color: #333;}
    .ns-purchase-page .purchase-img{display: flex;justify-content: center;align-items: center;width: 85px;height: 85px;margin-right: 20px;}
    .ns-purchase-page .purchase-img img{max-width: 100%;max-height: 100%;}
    .ns-purchase-page .purchase-content{flex: 1;}
    .ns-purchase-page .purchas-title{font-size: 18px;color: #323233;line-height: 24px;margin-bottom: 8px;}
    .ns-purchase-page .purchas-desc{color: #969799;line-height: 20px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .ns-purchase-page .purchas-price span:nth-of-type(2){}
    .ns-purchase-page .purchas-period, .ns-purchase-page .purchas-shop{margin-top: 20px;}
    .ns-purchase-page .purchas-period .period-title, .ns-purchase-page .purchas-shop .shop-title{font-size: 16px;}
    .ns-purchase-page .purchas-period .period-content{display: flex;margin-top: 10px;}
    .ns-purchase-page .purchas-period .period-content li{width: 122px;height: 36px;line-height: 36px;text-align: center;border: 1px solid #e5e5e5;cursor: pointer;}
    .ns-purchase-page .purchas-period .period-content li + li{margin-left: 5px;}
    .ns-purchase-page .purchas-shop .shop-content{display: flex;flex-direction: column;margin-top: 10px;padding: 20px;border: 1px solid #e5e5e5;box-sizing: border-box;}
    .ns-purchase-page .purchas-shop .shop-content input{padding-left: 10px;border: 1px solid #e5e5e5;height: 30px;line-height: 30px;width: 140px;}
    .ns-purchase-page .purchas-shop .shop-content-between{display: flex;align-items: center;justify-content: space-between;height: 45px;}
    .ns-purchase-page .purchas-shop .shop-content-between .content{display: flex;align-items: center;justify-content: space-between;width: 170px;}
    .ns-purchase-page .purchas-shop .shop-content-between .content span{display: inline-block;width: 80px;text-align: center;}
    .ns-purchase-page .purchas-shop .shop-content-state{margin-top: 10px;color: #9f9fa1;}
    .ns-purchase-page .detail-operation{margin-top: 50px;display: flex;justify-content: flex-end;align-items: center;}
    .ns-purchase-page .detail-operation .total{margin-right: 10px;}
    .ns-purchase-page .detail-operation .total span{font-size: 18px;}
</style>
{/block}
{block name="main"}
<div class="ns-combo-box">
    <h1>店铺套餐</h1>
    <ul class="ns-combo-template">
        {foreach $addon_list as $addon_item}
        <li class="combo-item">
            <div class="item-title">{$addon_item.group_name}</div>
            <p class="item-desc">{$addon_item.desc}</p>
            <div class="item-content">
                <p class="title">营销应用：</p>
                {foreach $addon_item.exist_addon_list as $addon_name}
                <span class="exist-addon"><i class="ns-text-color">√</i>{$addon_name}</span>
                {/foreach}
                {foreach $addon_item.noexist_addon_list as $addon_name}
                <span><i class="ns-red-color">×</i>{$addon_name}</span>
                {/foreach}
            </div>
            {if count($addon_item.exist_addon_list) + count($addon_item.noexist_addon_list) > 11}
            <span class="ns-click-show" onclick="allShow(this)"><i class="iconfont iconiconangledown"></i></span>
            <span class="ns-click-hide layui-hide" onclick="allHide(this)"><i class="iconfont iconiconangledown-copy"></i></span>
            {/if}
            <button class="layui-btn layui-btn-primary ns-text-color ns-border-color item-buy item-detail" data-group-fee="{$addon_item.fee}" data-group-id="{$addon_item.group_id}">￥<span class="">{$addon_item.fee}</span>/{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {/if}</button>
        </li>
        {/foreach}
    </ul>
</div>

<div class="ns-purchase-plan">
    {foreach $addon_list as $addon_item}
    <div class="ns-purchase-page layui-form layui-hide" id="detail_group_id_{$addon_item.group_id}">
        <div class="purchase-img">
            <img src="{:img($addon_item.image)}" onerror=src="HOME_IMG/shop.png" />
        </div>
        <div class="purchase-content">
            <h2 class="purchas-title"><span class="purchas-price ns-text-color">{$addon_item.fee}元/{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {/if}</span></h2>
            <p class="purchas-desc">{$addon_item.desc}</p>
            <div class="purchas-shop">
                <!--<div class="shop-title">设置套餐</div>-->
                <div class="shop-content">
                    <div class="shop-content-between">
                        <span><span class="required">*</span>店铺名称</span>
                        <span class="content"><input type="text" name="site_name" placeholder="请输入店铺名称" lay-verify="shop_name" value=""></span>
                    </div>
                    <div class="shop-content-between opening-hours">
                        <span><span class="required">*</span>套餐时长</span>
                        <span class="content"><input type="number" name="num" value="1">{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {/if}</span>
                    </div>
                    <div class="shop-content-state">
                        <span>附加说明：</span>
                        <span>开店完成之后，免费赠送{$addon_item.sms_num}条短信</span>
                    </div>
                </div>
            </div>

            <div class="detail-operation">
                <div class="total">
                    合计：<span class="ns-red-color">￥{$addon_item.fee}</span>
                </div>
                <button class="layui-btn ns-bg-color" lay-submit lay-filter="submit-order-{$addon_item.group_id}" >提交订单</button>
            </div>
        </div>
    </div>
    {/foreach}
</div>

{/block}
{block name="script"}
<script>
    var groupId,form,groupFee;

    //鼠标移出
    $("body").on("mouseleave", ".combo-item", function () {
		$(this).removeClass("ns-border-color");
		$(this).find("button").removeClass("ns-bg-color");
		$(this).find("button").addClass("layui-btn-primary");
		$(this).find("button").addClass("ns-text-color");
    });

    //鼠标移入
    $("body").on("mouseenter ", ".combo-item", function () {
		$(this).addClass("ns-border-color");
		$(this).find("button").addClass("ns-bg-color");
		$(this).find("button").removeClass("layui-btn-primary");
		$(this).find("button").removeClass("ns-text-color");
    });
	
	// 展开全部
	function allShow(obj) {
		var len = $(obj).siblings(".item-content").find("span").length;
		var h = $(obj).siblings(".item-content").find("span").height();  // 每一个span的高度
		var hDiv = $(obj).siblings(".item-content").height();  // 外层div的高度
		var _hDiv = $(obj).parents(".combo-item").height();  // 父元素的高度
		var _h = h * (len - 11);
		
		$(obj).siblings(".item-content").animate({
			height: hDiv + _h + 'px',
		});
		
		$(obj).parents(".combo-item").animate({
			height: _hDiv + _h + 'px',
		});
		
		$(obj).addClass("layui-hide");
		$(obj).siblings(".ns-click-hide").removeClass("layui-hide");
	}
	
	// 收起
	function allHide(obj) {
		var len = $(obj).siblings(".item-content").find("span").length;
		var h = $(obj).siblings(".item-content").find("span").height();  // 每一个span的高度
		var hDiv = $(obj).siblings(".item-content").height();  // 外层div的高度
		var _hDiv = $(obj).parents(".combo-item").height();  // 父元素的高度
		var _h = h * (len - 11);
		console.log(_hDiv);
		
		$(obj).siblings(".item-content").animate({
			height: hDiv - _h + 'px',
		});
		
		$(obj).parents(".combo-item").animate({
			height: _hDiv - _h + 'px',
		});
		
		$(obj).addClass("layui-hide");
		$(obj).siblings(".ns-click-show").removeClass("layui-hide");
	}
    
    layui.use('form', function(){
        var form = layui.form;

        /* 立即购买 */
        $("body").on("click",".item-buy",function(){
            groupId = $(this).attr('data-group-id');
            groupFee = $(this).attr('data-group-fee');

            $.ajax({
                type: 'POST',
                url: ns.url("home/sysusergroup/checkOrder"),
                data:{"group_id": groupId},
                dataType: 'JSON',
                success: function(res) {
                    if (res.code >= 0) {
                        if (res.data){
                            var index = layer.open({
                                type: '0',
                                title: '订购提醒',
                                btn: ['去支付', '重新购买'],
                                content: '你有未完成支付的服务订单，可直接支付或重新购买',
                                yes: function(index, layero){
                                    location.href = ns.url('home/ordercreate/confirm', {out_trade_no:res.data.out_trade_no});
                                    layer.close(index);
                                },
                                btn2: function(){
                                    detailOrder();
                                    layer.close(index);
                                }
                            })
                        }else{
                            detailOrder();
                            layer.close(index);
                        }
                    }
                }
            });
        });

        function detailOrder(){
            $(".ns-combo-box").addClass("layui-hide");
            $("#detail_group_id_"+ groupId).removeClass("layui-hide").siblings().addClass("layui-hide");

            form.on('submit(submit-order-'+groupId+')', function(data){
                data.field.group_id = groupId;
                $.ajax({
                    type: 'POST',
                    url: ns.url("home/ordercreate/create"),
                    data: data.field,
                    dataType: 'JSON',
                    success: function(res) {
                        if (res.code >= 0) {
                            location.href = ns.url('home/ordercreate/confirm', {out_trade_no:res.data});
                        }else{
                            layui.msg(res.message);
                        }
                    }
                });
            });
        }

        //表单验证
        form.verify({
            shop_name: function(value){
                if (value == '') {
                    return '店铺名称不能为空';
                }
            }
        });
    });

    //监听开店时长
    $(".opening-hours input").on("input propertychange",function(){
        var shopNum = $(this).val() ? $(this).val() : 0;
        shopNum = parseInt(shopNum);
        $(this).val(shopNum);

        if(shopNum < 1){
            $(this).val(1);
            shopNum = 1;
            layer.msg("套餐使用时长不能小于1{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {/if}");
        }

        var fee =  shopNum * groupFee;

        $("#detail_group_id_"+groupId +" .total span").text("￥"+fee);
    });
</script>
{/block}